<template>
  <div class="singerlist">
    <button @click="onBack">返回</button>
    <ul>
      <li
        v-for="(item, index) in list"
        :key="item.id + index"
        @click="onPlay(item.id)"
      >
        {{ item.name }}------
        <span v-for="item in item.artists" :key="item.id"
          >{{ item.name }} &nbsp;&nbsp;</span
        >
      </li>
    </ul>
  </div>
</template>

<script>
import axios from "axios";
export default {
  data() {
    return {
      list: [],
    };
  },
  computed: {},
  watch: {},

  methods: {
    async singerList(id) {
      let result = await axios.post(
        `http://192.168.1.107:3000/artist/album?id=${id}`,
        {
          withCredentials: true,
        }
      );
      this.list = result.data.hotAlbums;
      console.log(this.list);
    },

    async onPlay(id) {
      let result = await axios.post(
        `http://192.168.1.107:3000/song/detail?ids=${id}`,
        {
          withCredentials: true,
        }
      );
      console.log(111111, result.data.songs[0].id);
      this.$router.push("/detail");
    },
    async onBack() {
      localStorage.removeItem("str");
      this.$router.go(-1);
    },
  },
  created() {
    const str = JSON.parse(localStorage.getItem("str"));
    const singerNum = str["singerId"];
    const singerName = str.singer;
    this.singerList(singerNum);
  },
  mounted() {},
  components: {},
};
</script>
<style scoped>
.singerlist button {
  width: 60px;
  height: 30px;
  background-color: #eee;
  border: none;
  color: #fff;
}
.singerlist li {
  line-height: 26px;
}
</style>